<script>
import { onMounted, reactive, toRefs } from "vue";
import { getinfo } from "../assets/api/info.js";
import { useRouter } from "vue-router";

export default {
  setup() {
    let router = useRouter();
    const list = reactive({
      editId: 1,
      // 帖子数据
      infoList: [],
      // 评论数据
      plList: [],
      // 加载
      load:true,
    });
    let goInfo = (item) => {
      router.push({
        path: "/detailsinfo",
        query: {
          id: item.id,
        },
      });
    };
    // 时间格式转换
    function timeago(stringTime) {
      //dateTimeStamp是一个时间毫秒，注意时间戳是秒的形式，在这个毫秒的基础上除以1000，就是十位数的时间戳。13位数的都是时间毫秒。
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var week = day * 7;
      var month = day * 30;
      var time1 = new Date().getTime(); //当前的时间戳
      var time2 = Date.parse(new Date(stringTime)); //指定时间的时间戳
      var time = time1 - time2;

      var result = null;
      if (time < 0) {
        alert("设置的时间不能早于当前时间！");
      } else if (time / month >= 1) {
        result = "" + parseInt(time / month) + "月前";
      } else if (time / week >= 1) {
        result = "" + parseInt(time / week) + "周前";
      } else if (time / day >= 1) {
        result = "" + parseInt(time / day) + "天前";
      } else if (time / hour >= 1) {
        result = "" + parseInt(time / hour) + "小时前";
      } else if (time / minute >= 1) {
        result = "" + parseInt(time / minute) + "分钟前";
      } else {
        result = "刚刚发布！";
      }
      return result;
    }
    onMounted(() => {
        list.editId = window.localStorage.getItem("editId")
      
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f2f2f2;");

      getinfo()
        .then((data) => {
          list.infoList = data;
          list.load = false
        })
        .then(() => {
          if (window.localStorage.getItem("myComment")) {
            list.plList = JSON.parse(localStorage.getItem("myComment"));
            for (var i = 0; i < list.plList.length; i++) {
              list.infoList.unshift(list.plList[i]);
            }
          }
        });
    });

    return {
      ...toRefs(list),
      goInfo,
      timeago,
    };
  },
};
</script>
<template>
  <div class="container">
    <van-sticky>
      <top-coms v-if="editId == 2"></top-coms>
      <top-com v-if="editId == 1"></top-com>
      <van-loading v-if="load" size="30">加载中...</van-loading>

      <div class="tabs" v-if="editId == 1">
        <ul>
          <router-link custom to="/info" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate" class="con">热门</li>
          </router-link>
          <router-link custom to="/infonew" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">资讯</li>
          </router-link>
          <router-link custom to="/infovideo" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">视频</li>
          </router-link>
        </ul>
      </div>
      <div class="tabse" v-if="editId == 2">
        <ul>
          <router-link custom to="/info" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate" class="con">热门</li>
          </router-link>
          <router-link custom to="/infonew" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">资讯</li>
          </router-link>
          <router-link custom to="/infovideo" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">视频</li>
          </router-link>
        </ul>
      </div>
    </van-sticky>

    <div class="home">
      <div :class="['home-pg', { all_bottom: editId == 2 }]">
        <div
          class="row"
          v-for="item in infoList"
          :key="item.zone_id"
          @click="goInfo(item)"
        >
          <div class="head">
            <div class="img-box">
              <div class="left">
                <img :src="item.zone_image" alt="" />
                <div class="auther">
                  <div class="name">{{ item.nickname }}</div>
                  <div class="time">
                    {{ timeago(item.publish_time * 1000) }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="content">{{ item.title }}</div>
            <div class="img" v-if="item.images.length != 0">
              <img
                v-for="(items, index) in item.images.slice(0, 3)"
                :key="index"
                :src="items.url"
                alt=""
              />
            </div>
            <div class="opera">
              <div class="comment">
                <i class="iconfont icon-comment_light"></i
                >{{ item.reply_count }}
              </div>
              <div class="zan">
                <i class="iconfont icon-appreciate_light"></i
                >{{ item.like_count }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-link to="/sentinfo" class="fbpl">
      <i class="iconfont icon-zengjia"></i>
    </router-link>
    <bottom-com :tabId="(tabId = 2)" v-if="editId == 1"></bottom-com>
    <bottom-coms :tabId="(tabId = 2)" v-if="editId == 2"></bottom-coms>
  </div>
</template>
<style lang="scss" scoped>
.fbpl {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 130px;
  border-radius: 50%;
  right: 10px;
  background: #f2cc00;
  text-align: center;
  line-height: 50px;
  .iconfont {
    font-weight: bold;
    font-size: 18px;
    color: #000;
  }
}
.home {
  margin: 0 0 60px;

  .home-pg {
    padding-bottom: 90px;
    margin-top: 10px;

    .row {
      margin: 0 12px 10px;
      padding: 0 12px 6px;

      background: #fff;
      border-radius: 6px;

      .head {
        padding: 10px 0 0;
        font-size: 19px;
        color: #333;
        font-weight: 700;
        .img-box {
          align-items: center;

          width: 100%;
          height: 43px;
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            align-items: center;
          }
          img {
            width: 43px;
            height: 43px;
            border-radius: 100%;
          }
          .auther {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
          }
          .time {
            font-size: 10px;
            color: #c9c9c9;
          }
          .name {
            font-size: 14px;
            color: #383838;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          // .right {
          //   width: 67px;
          //   height: 27px;
          //   line-height: 27px;
          //   background: #f7f7f9;
          //   border-radius: 14px;
          //   font-size: 0;
          //   color: #999;
          //   text-align: center;
          //   span {
          //     font-size: 14px;
          //     margin-left: 2px;
          //   }
          // }
        }
      }
      .content {
        margin: 15px 0 4px;
        line-height: 20px;
        font-size: 14px;
        color: #242629;
        word-break: break-all;
      }
      .img {
        display: flex;
        margin: 0 5px 5px 0;
        width: 100%;
        flex-wrap: wrap;
        img {
          margin-top: 6px;
          border-radius: 10px;
          width: 100px;
          height: 100px;
          border: 0;
          margin-right: 4px;
        }
      }
      .opera {
        margin-top: 10px;
        height: 24px;
        line-height: 24px;
        display: flex;
        justify-content: flex-end;
        .iconfont {
          margin-right: 4px;
        }
        .comment {
          width: 30px;
          height: 24px;
          font-size: 14px;
          color: #999;
        }
        .zan {
          width: 30px;
          margin-left: 15px;
          height: 24px;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .all_bottom {
    padding-bottom: 60px;
  }
}
.tabse {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededef;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    height: 37px;
    padding-top: 4px;
    line-height: 38px;
    position: relative;

    // margin: 0 auto;
    white-space: nowrap;
    display: flex;
    position: relative;
    margin-bottom: 6px;

    li {
      position: relative;
      color: #3f3f3f;
      font-size: 16px;
      margin: 0 18px;

      &.con {
        //  font-size: 20px;
        font-weight: 700;
        &::before {
          content: "";
          position: absolute;
          top: auto;
          left: 18%;
          bottom: -6px;
          right: auto;
          height: 3px;
          width: 60%;
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          border-radius: 2px;
        }
      }
    }
  }
}
.tabs {
  background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    height: 37px;
    padding-top: 4px;
    line-height: 38px;
    position: relative;

    // margin: 0 auto;
    white-space: nowrap;
    display: flex;
    position: relative;
    margin-bottom: 6px;

    li {
      position: relative;
      color: #d679a6;
      font-size: 16px;
      margin: 0 18px;

      &.active {
        //  font-size: 20px;
        font-weight: 700;
        &::before {
          content: "";
          position: absolute;
          top: auto;
          left: 18%;
          bottom: -6px;
          right: auto;
          height: 3px;
          width: 60%;
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          border-radius: 2px;
        }
      }
    }
    .con {
      font-size: 16px;
      color: #f2cc00;
      font-weight: 600;
      position: relative;
    }
  }
}
::v-deep .van-share-sheet__options {
  justify-content: space-around;
  padding: 16px 0;
}
::v-deep .van-loading {
  position: fixed;
  top: 100px;
  z-index: 100;
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
}
</style>